<template>
  <title-container
    v-if="question"
    :id="question.outId"
    :index="index"
    :total="total"
    :error="error"
    :question="question"
  >
    <div class="content">
      <a-textarea
        v-model="value"
        placeholder="填写内容..."
        :auto-size="{ minRows: 1, maxRows: 5 }"
        @input="oninput"
      />
    </div>
  </title-container>
</template>

<script>
import TitleContainer from '@/components/titleContainer'
export default {
  name: 'Blank',
  components: {
    TitleContainer
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default: null
    },
    error: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: ''
    }
  },
  created() {
    this.question.requiredFlag = this.question.requiredFlag === undefined ? true : this.question.requiredFlag
    this.question.questionTag = this.question.questionTag || []
    const tag = '填空题'

    this.question.questionTag.unshift(tag)
  },
  methods: {
    oninput() {
      // console.log('填空题', this.value)
      if (this.question.requiredFlag && !this.value) return false

      const index = this.index
      const answer = {
        surveyId: this.question.surveyId,
        outId: this.question.outId,
        questionType: this.question.questionType,
        result: [
          {
            content: this.value || '',
            index: 0,
          }
        ]
      }
      // console.log('填空题', answer, index)
      this.$emit('complete', answer, index)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.blank_container {
    .content{
      font-size: 14px;
        margin-top: 28px;
        margin-bottom: 43px;
    }
}

</style>
